<div class="audio-player-container" style="display: none">
  <audio id="player" preload="metadata" src=""></audio>

  <div class="audio-player-top-container">
    <!-- <div class="play-btn-container"> -->
    <button id="play-btn" class="audio-button"></button>
    <!-- </div> -->
    <div class="audio-player-central-container">
      <div id="timeline-container" class="audio-player-timeline-container">
        <!-- max is set very large so that when file is pre-loaded,
             the current position isn't truncated. -->
        <input type="range" class="timeline" max="1000000000" value="0"
               step="0.1" />
        <div class="bookmark-markers-container"></div>
        <div class="duration-container">
          <span class="current-time">0:00</span>
          <span class="duration">0:00</span>
        </div>
      </div>
      <div class="audio-player-controls-container">
        <!-- <div class="skip-back-btn-container"> -->
        <button id="skip-back-btn" class="audio-button"></button>
        <!-- </div> -->
        <div class="rewind-container">
          <div class="rewind-btn-container">
            <button id="rewind-btn" class="audio-button"></button>
            <button id="ff-btn" class="audio-button"></button>
          </div>
          <select name="rewind-option" id="rewind-option">
            <option value="3">3 sec</option>
            <option value="5" selected>5 sec</option>
            <option value="10">10 sec</option>
            <option value="30">30 sec</option>
            <option value="60">60 sec</option>
          </select>
        </div>
        <div id="playback-rate-container" title="Playback rate controls. Click on the indicator to reset">
          <button id="playback-rate-decrease" class="audio-button rate-btn"><span>-</span></button>
          <div id="playback-rate-indicator">1.0</div>
          <button id="playback-rate-increase" class="audio-button rate-btn"><span>+</span></button>
        </div>
      </div>
    </div>
    <div class="audio-player-right-container">
      <input type="range" class="volume" max="100" value="100"/>
      <div class="bookmark-buttons-container">
        <button id="bkm-save-btn" class="audio-button"></button>
        <div class="bookmark-jump-container">
          <button id="bkm-prev-btn" class="audio-button"></button>
          <button id="bkm-next-btn" class="audio-button"></button>
        </div>
      </div>
    </div>
    <button id="pin" class="audio-button"></button>
  </div>
</div>
